<!--  -->
<template>
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="选择省份">
              <el-select
                v-model="form.province_id"
                :disabled="type=='edit'?true:false"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="选择类型" prop="link_type">
              <el-select
                v-model="form.link_type"
                placeholder="请选择"
                @change="handleChange"
                clearable
              >
                <el-option
                  v-for="(item) in linkTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="选择项目/礼包" prop="link_id">
              <el-select
                :disabled="form.link_type !== ''?false:true"
                v-model="form.link_id"
                placeholder="请选择"
                filterable
                remote
                :remote-method="remoteMethod"
                @change="handleContent"
                clearable
              >
                <el-option
                  v-for="(item) in linkContent"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="排序">
              <el-input v-model="form.sort" :disabled="form.link_id !==''?false:true" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="addList" :disabled="isDisabled">添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <el-table :data="tableData" class="tableData" style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="100"
          align="center"
          :index="table_index"
        />
        <el-table-column prop="link_type_cn" label="关联类型" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column prop="link_content" label="具体项目/礼包" />
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="textCenter">
      <el-button type="primary" @click="addBack">添加</el-button>
    </div>
  </div>
</template>

<script>
import {
  hotSelect,
  getLinkContent,
  hotStore,
  hotDel,
  hotProvince,
} from "@/api/appList";
export default {
  data() {
    return {
      form: {
        sort: "",
        province_id: "",
        link_type: "",
        link_id: "",
        page: 1,
        pageSize: 10,
      },
      keyword: "",
      provinceList: [],
      linkTypeList: [],
      linkContent: [],
      allContent: [],
      tableData: [],
      newArr: [],
      tableLoading: false,
      isDisabled: false,
      // disabledContent: true,
      // disabledSort: true,
      type: "",
    };
  },

  mounted() {
    console.log("query", this.$route.query);
    this.type = this.$route.query.type;
    if (this.type == "edit") {
      this.$route.meta.title = "编辑热门推荐";
      let data = { province_id: this.$route.query.id };
      this.getProList(data);
      // this.getDetails(this.$route.query.id);
    } else {
      this.$route.meta.title = "添加热门推荐";
    }
    this.getSelect();
  },

  methods: {
    table_index(index) {
      return (this.form.page - 1) * this.form.pageSize + index + 1;
    },
    // async getDetails(province_id) {
    //   let opt = { province_id };
    //   let res = await hotProvince(opt);
    //   console.log("ress", res.data);
    // },
    async getSelect() {
      let { data } = await hotSelect();
      if (data.status == 0) {
        this.provinceList = data.data.provinceArray;
        this.linkTypeList = data.data.linkTypeArray;
      } else {
        this.$message.error(data.message);
      }
    },
    // 类型切换
    handleChange(e) {
      console.log("e1", e);
      this.form.link_type = e;
      this.getContent();
    },
    // 远程搜索查询
    remoteMethod(query) {
      this.keyword = query;
      if (this.keyword !== "") {
        this.getContent();
      } else {
        this.getContent();
      }
    },
    handleContent(e) {
      this.form.link_id = e;
    },
    async getContent(opt) {
      let obj = {
        link_type: this.form.link_type,
        keyword: this.keyword,
      };
      if (this.form.link_type == "") {
        return;
      }
      let { data } = await getLinkContent(obj);
      if (data.status == 0) {
        this.linkContent = data.data;
        this.allContent = data.data;
      } else {
        this.$message.error(data.message);
      }
    },
    async addList() {
      if (this.form.province_id == "" || this.form.sort == "") {
        this.$message.warning("请输入排序或选择省份");
        return;
      }
      let res = await hotStore(this.form);
      if (res.data.status == 0) {
        let data = {
          province_id: this.form.province_id,
        };
        this.getProList(data);
      } else {
        this.$message.error(res.data.message);
      }
    },
    async getProList(opt) {
      let { data: res } = await hotProvince(opt);
      if (res.status == 0) {
        if (res.data.length > 0) {
          this.tableData = res.data;
          this.form.province_id = this.tableData[0].province_id;
          if (this.tableData.length >= 4) {
            this.isDisabled = true;
          } else {
            this.isDisabled = false;
          }
        } else {
          this.tableData = [];
        }
      } else {
        this.$message.error(res.message);
      }
    },
    // 返回列表
    addBack() {
      this.$router.push("/hotRecommended");
    },
    handleDel(id) {
      console.log("id", id);
      let data = { id };
      this.$confirm("此操作将会删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          hotDel(data)
            .then((res) => {
              console.log("res", res.data);
              if (res.data.status == 0) {
                this.$message.success("删除成功");
                let data = {
                  province_id: this.form.province_id,
                };
                this.getProList(data);
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((err) => {
              this.$message.error(res.message);
            });
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
  },
};
</script>
<style  scoped>
.textCenter {
  text-align: center;
  margin-top: 30px;
}
</style>